<template>
    <div class="mb-16px content-container">
        <Title :icon="'line-chart-fill'" :title="'访问明细'"></Title>
        <div class="ml-16px mr-16px">
            <div class="flex items-center text-14px">
                入口页面
                <div class="w-200px ml-12px mr-12px">
                    <el-input v-model="formData.web"></el-input>
                </div>
                IP
                <div class="w-200px ml-12px mr-12px">
                    <el-input v-model="formData.ip"></el-input>
                </div>
                <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }">搜索</el-button>
            </div>
            <div class="mt-20px table-container">
                <el-table :data="state.tableData" class="w-full">
                    <el-table-column label="" prop="name" align="center" width="10" />
                    <el-table-column label="访问时间" prop="time" align="center" width="200" />
                    <el-table-column label="地域" prop="area" align="center" width="150" />
                    <el-table-column label="来源" prop="source" align="center" width="150" />
                    <el-table-column label="入口页面" prop="entry" align="center" />
                    <el-table-column label="访问IP" prop="ip" align="center" width="200" />
                    <el-table-column label="访问页数" prop="page" align="center" width="100" />
                </el-table>
            </div>
            <Pagination v-if="state.tableData.length > 0" v-model:total="state.tableData.length" v-model:page="state.page.curPage" v-model:limit="state.page.pageSizes" @pagination="handleQuery" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'

const formData = reactive({
    web: '',
    ip: ''
})

const state = reactive({
    tableData: [
        {
            time:'2022-01-01 00:00:00',
            area:'浙江省杭州市',
            source:'直接访问',
            entry:'https://www.baidu.com',
            ip:'192.168.1.1',
            page:3
        }
    ],
    page:{
        total:0,
        curPage:1,
        limit:10,
        pageSizes:10,
    },
})

function handleSearch(){

}

function handleQuery(){
    
}
</script>

<style scoped>

</style>